<template>
    <section class="houseDetails-public-header-content homejunction-box">
        <header>
            <img src="../../../static/img/title-bg-img-left.jpg" alt="">
            <span>区域数据概况</span>
            <img src="../../../static/img/title-bg-img-right.jpg" alt="">
        </header>
        <div class="content clearfix">
            <el-row v-loading="HJLoading" v-show="!isNoDataShow">
                <el-col :span="24">
                    <age></age>
                </el-col>
                <el-col :xs="24" :sm="24" :md="24" :lg="12">
                    <HJarea></HJarea>
                </el-col>
                <el-col :xs="24" :sm="24" :md="24" :lg="12">
                    <education></education>
                </el-col>
                <el-col :span="24">
                    <livingCost></livingCost>
                </el-col>
                <el-col :span="24">
                    <crime></crime>
                </el-col>
                <el-col :xs="24" :sm="24" :md="24" :lg="12">
                    <race></race>
                </el-col>
                <el-col :xs="24" :sm="24" :md="24" :lg="12">
                    <gender></gender>
                </el-col>
                <el-col :span="24">
                    <employment></employment>
                </el-col>
                <el-col :span="24">
                    <households></households>
                </el-col>
                <el-col :span="24">
                    <income></income>
                </el-col>
                <el-col :span="24">
                    <population></population>
                </el-col>
                <el-col :span="24">
                    <weather></weather>
                </el-col>
            </el-row>
            <h4 ref="HJ_NoData" v-show="isNoDataShow"></h4>
        </div>
    </section>
</template>

<script>
    import age from './age.vue'    //年龄统计——柱状图和饼图
    import HJarea from './area.vue'    //面积统计——饼图
    import livingCost from './livingCost.vue'    //生活成本——柱状图
    import crime from './crime.vue'    //犯罪指数——柱状图
    import education from './education.vue'    //教育比例——饼图
    import employment from './employment.vue'    //就业比例——饼图
    import gender from './gender.vue'    //性别比例——饼图
    import households from './households.vue'    //households指数——柱状图+文字
    import income from './income.vue'    //家庭收入统计——柱状图和饼图
    import population from './population.vue'    //人口统计——柱状图+文字
    import race from './race.vue'    //种族比例——2个饼图
    import weather from './weather.vue'    //天气指数——折线图、柱状图和文字

    export default {
        data() {
            return {
                houseId: this.$route.query.houseId,
                HJLoading: true,//HJ数据图表的加载动画
                isNoDataShow: false,    //判断是否有无数据

            }
        },
        computed: {},
        created() {
        },
        mounted() {
            //获取homejunction数据
            this.getHomejunctionData();
        },
        methods: {
            //获取homejunction数据
            getHomejunctionData() {
                this.HJLoading = true;
                this.$get('/report/periphery/' + this.houseId).then(res => {
                    this.HJLoading = false;
                    if (res.status == 0) {
                        this.isNoDataShow = false;
                        this.$store.commit('set_homejunctionData', res.data);
                    } else {
                        this.isNoDataShow = true;
                        this.$refs.HJ_NoData.innerText = res.msg;
                    }
                });
            },

        },
        components: {
            age, //年龄统计——柱状图和饼图
            HJarea, //面积统计——饼图
            livingCost, //生活成本——柱状图
            crime, //犯罪指数——柱状图
            education, //教育比例——饼图
            employment, //就业比例——饼图
            gender, //性别比例——饼图
            households, //households指数——柱状图+文字
            income, //家庭收入统计——柱状图和饼图
            population, //人口统计——柱状图+文字
            race, //种族比例——2个饼图
            weather, //天气指数——折线图、柱状图和文字

        }
    }
</script>

<style lang="less" type="text/less">
    .homejunction-box {
        border-radius: 5px;
        overflow: hidden;
        position: relative;
        > header {
            display: flex;
            display: -webkit-flex;
            align-items: center;
            justify-content: center;
            > span {
                padding: 0 5px;
                font-size: 30px;
                color: #00bc84;
            }
            >img{
                display: inline-block;
                max-width: 100px;
            }
        }
        >.content {
            padding: 15px;
            width: 100%;
            overflow: hidden;
            >.el-row {
                .el-col:first-of-type{
                    .echart-chart {
                        margin: 0;
                    }
                }
                .el-col {
                    padding: 0;
                    .echart-chart {
                        margin: 30px 0 0 0;
                        > .inside {
                            border: 1px solid #dee2e5;
                            padding: 0;
                            > header {
                                padding: 13px 20px;
                                background: #edf7ff;
                                font-size: 18px;
                                color: #242424;
                                border-bottom: 1px solid #dee2e5;
                                > i {
                                    font-size: 20px;
                                    color: #ff7500;
                                }
                            }
                            > .chartBox {
                                width: 100%;
                                text-align: center;
                                position: relative;
                                background: #fff;
                                >article {
                                    > .el-radio-group {
                                        padding: 15px 0;
                                        > .el-radio + .el-radio {
                                            margin-left: 15px;
                                        }
                                    }

                                    > .regionType-button {
                                        > div {
                                            padding: 10px;
                                            float: right;
                                        }
                                    }

                                    > .chart-div {
                                        width: 100%;
                                        height: 250px;
                                    }

                                    > p {
                                        color: #ff7b2c;
                                        text-align: left;
                                        margin: 5px 0;
                                        padding: 0 10px;
                                    }
                                }
                                > h4 {
                                    min-height: 100px;
                                    display: flex;
                                    justify-content: center;
                                    align-items: center;
                                    font-size: 20px;
                                    color: #000;
                                    text-align: center;
                                }
                                aside {
                                    text-align: left;
                                    padding: 20px;
                                    > p {
                                        line-height: 30px;
                                        color: #000;
                                        > span {
                                            color: #858585;
                                        }
                                    }
                                }
                            }
                        }
                    }
                }
            }
        }
    }
</style>
